<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>首页</title>
<%@ include file="/page/wx/include.jsp" %>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/statics_wx/css/idangerous.swiper.css">
<script  type="text/javascript" src="<%=basePath%>/statics_wx/js/idangerous.swiper-2.1.min.js"></script>
<script type="text/javascript">
	$(function() {
		$("#searchKey").bind('keypress', function(event) {
			if (event.keyCode == "13") {
				var url = rootPath + "/wx/product/search";
				var form = $('<form></form>');  
				form.attr('action', url);  
				form.attr('method', 'post');
				form.attr('target', '_self');
				form.append('<input type="hidden" name="searchKey" value="'+$("#searchKey").val()+'"/>');
				form.appendTo("body");
				form.submit();
			}
		});
		
		//搜索
		$("#doSearch").click(function(){
			var url = rootPath + "/wx/product/search";
			var form = $('<form></form>');  
			form.attr('action', url);  
			form.attr('method', 'post');
			form.attr('target', '_self');
			form.append('<input type="hidden" name="searchKey" value="'+$("#searchKey").val()+'"/>');
			form.appendTo("body");
			form.submit();
		});
		
		$("#search_key").bind('keypress', function(event) {
			if (event.keyCode == "13") {
				$("#product_form").submit();
			}
		});
	});
</script>
</head>
<body style="background:#f3f3f3">

	<div class="banner" style="height:180px">
		<div class="swiper-container banner11">
			<div class="swiper-wrapper">
				<c:forEach items="${adList }" var="config">
					<div class="swiper-slide">
						<!-- ?x-oss-process=image/crop,h_200 裁剪高度200 -->
						<!-- ?x-oss-process=image/resize,h_200 将图缩略成高度为100，宽度按比例处理  -->
						<!-- ?x-oss-process=image/resize,m_fill,h_200,w_400  将图缩略成高度为200，宽度按比例处理  -->
						<a href="${config.linkUrl}"> <img src="${imgRootURL}/${config.imagePath}" style="height:180px;"/></a>
					</div>
				</c:forEach>
			</div>
		</div>
		<div class="pagination page11">
		</div>
	 <div class="search_part">
    	<div class="search_part_con">
        	<div class="search_part1">
            	<i></i>
                <p>
                	<input type="input" id="searchKey" name="searchKey" class="inputstyle1" placeholder="台式机" />
                </p>
				<a id="doSearch" href="javascript:void(0);">搜索<u></u></a>
            </div>
        </div>
    </div>
</div>

	<div class="index_menu">
		<ul>
			<%--循环微信首页模块 --%>
			<c:forEach items="${moduleList}" var="module">
			<li>
				<a href="${module.linkUrl}"  >
					<p>
						<i> <img src="${imgRootURL}/${module.imagePath}" />
						</i> <span>${module.configTitle }</span>
					</p>
				</a>
			</li>	
			</c:forEach>
		</ul>
	</div>
	<div class="shzx">
		<div class="shzx_con">
			<div class="notice">
				<i></i>
				<div class="txt1">
					<ul>
						<c:choose>
							<c:when test="${not empty message }">
								<li><a href="<%=basePath%>/wx/wxmessage/toWxMessagePage?messageId=${message.id}">
									<c:choose>
										<c:when test="${fn:length(message.title) >= 20 }">
                                                  ${fn:substring(message.title, 0, 20) }...
                                              </c:when>
										<c:otherwise>
                                                  ${message.title}
                                              </c:otherwise>
									</c:choose>
								</a></li>
							</c:when>
							<c:otherwise>
								<li><a href="${rootPath}/wx/wxmessage/toWxMessageListPage">暂无咨询</a></li>
							</c:otherwise>
						</c:choose>
					</ul>
				</div>
				<strong><em></em> <a href="${rootPath}/wx/wxmessage/toWxMessageListPage">更多</a> </strong>
			</div>
		</div>
	</div>
	<div class="brand_list">
		<div class="brand_list_con">
			<ul>
				<c:forEach items="${floorList}" var="floor">
					<c:forEach items="${floor.configItemList}" var="config" varStatus="ind">
						<c:if test="${ind.index == 0 }">
							<li><a href="${config.linkUrl}"><img src="${imgRootURL}/${config.imagePath}" /></a></li>		
						</c:if>
					</c:forEach>
				</c:forEach>
			</ul>
		</div>
	</div>
	<div class="wntj_part">
		<div class="hd">
			<img src="${rootPath}/statics_wx/images/hd1.png" />
		</div>
		<div class="bd">
			<div class="recomment_list">
				<ul>
					<c:forEach items="${recommendList }" var="product">
					<li>
						<div class="box1">
							<div class="box1_con">
								<u></u>
								<div class="pic">
									<a href="${rootPath}/wx/product/detail?productId=${product.productId}"><img src="${imgRootURL}/${product.imagePath}" /></a>
								</div>
								<div class="item-info">
									<h2>
										<a href="${rootPath}/wx/product/detail?productId=${product.productId}">${product.productName }</a>
									</h2>
									<h3 id="dyna_price_${product.productId}">
									</h3>
								</div>
							</div>
						</div>
					</li>
					</c:forEach>
				</ul>
			</div>
		</div>
	</div>
	<jsp:include page="../wx_footer.jsp" />
</body>
<script>
		var mySwiper1 = new Swiper('.banner11', {
			pagination: '.page11',
			loop: true,
			autoplay: 5000,
			paginationClickable: true
		});
  
	</script>  
<script src="<%=basePath%>/js/wx/home/index.js"></script>
</html>